<template>
    <div>
        <!-- 上报 -->
        <el-button size="small" type="primary" @click="reportHandler">上报</el-button>

        <!-- 表格 -->
        <el-table :data="dataList.list" style="width: 100%" size="small">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="country" label="国" align="center"></el-table-column>
            <el-table-column prop="province" label="省" align="center"></el-table-column>
            <el-table-column prop="city" label="市" align="center"></el-table-column>
            <el-table-column prop="area" label="区" align="center"></el-table-column>
            <el-table-column prop="confirmed" label="新增确诊" align="center"></el-table-column>
            <el-table-column prop="suspected" label="疑似" align="center">
                <template slot-scope="scope">
                    <el-tag size="mini" type="warning">{{scope.row.suspected}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="dead" label="死亡" align="center">
                <template slot-scope="scope">
                    <el-tag size="mini" type="info">{{scope.row.dead}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="cure" label="治愈" align="center">
                <template slot-scope="scope">
                    <el-tag size="mini" type="success">{{scope.row.cure}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="severe" label="重症" align="center">
                <template slot-scope="scope">
                    <el-tag size="mini" type="danger">{{scope.row.severe}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="outside" label="境外输入" align="center"></el-table-column>
            <el-table-column prop="inputTime" label="上报时间" align="center" width="150">
                <template slot-scope="scope">
                    {{scope.row.inputTime | dateFormat}}
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            style="float:right;margin-top:1em"
            layout="total, prev, pager, next"
            @current-change="pageHandler"
            :current-page='params.page'
            :page-size='params.pageSize'
            :total="dataList.total">
        </el-pagination>
        
    </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'

export default {
    data() {
        return {
            // value: false,
            params: {
                page: 1,
                pageSize: 5
            }
        }
    },
    computed: {
        ...mapState("data",["dataList"])
    },
    created() {
        // 分页查询疫情信息
        this.queryEpidemic(this.params)
    },
    // 监听分页变化
    watch: {
        params: {
            handler:function() {
                // 分页
                this.queryEpidemic(this.params)
            },
            deep: true
        }
    },
    methods: {
        ...mapActions("data",["queryEpidemic"]),
        // 上报
        reportHandler() {
            this.$router.push({path:'/dynamicData/dataUp'})
        },
        // 分页
        pageHandler(page) {
            this.params.page = page
        }
    }
}
</script>